<template>
  <div class="main-container">
    <div class="left_container">
      <div class="search_container">
        <div class="search_item">
          <div class="name">合同状态</div>
          <div class="input">
            <DictSelect :band-value.sync="pageData.status" dict-type="contractState" />
          </div>
        </div>
        <div class="search_item">
          <div class="name">客户名称</div>
          <div class="input">
            <!--            <el-input v-model="pageData.customerName" clearable @clear="getList" />-->
            <CustomerModelingSelect
              :band-value.sync="pageData"
              show-prop="customerName"
            />
          </div>
        </div>
        <div class="search_item">
          <div class="name">渠道名称</div>
          <div class="input">
            <div class="input">
              <ChannelModelingSelect
                :band-value.sync="pageData"
                show-prop="channelName"
              />
              <!--              <el-input v-model="pageData.channelName" clearable @clear="getList" />-->
            </div>
          </div>
        </div>
        <div class="search_item">
          <div class="name">签订人员</div>
          <div class="input">
            <el-select v-model="pageData.signBy" filterable clearable>
              <el-option
                v-for="item in userOptions"
                :key="item.userId"
                :label="item.realName"
                :value="item.userId"
              />
            </el-select>
          </div>
        </div>
        <div class="search_item">
          <div class="button"><el-button type="search" @click.stop="getList">搜索</el-button></div>
        </div>
        <!--        <div class="search_item">-->
        <!--          <div class="name">最新拜访时间</div>-->
        <!--          <div class="input">-->
        <!--            <TimeRangeSearch :band-value.sync="pageData.signDate" @clearData="getList" />-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="search_item">
          <div class="name">签订日期</div>
          <div class="input">
            <TimeRangeSearch :band-value.sync="pageData.creatTime" @clearData="getList" />
          </div>
        </div>
      </div>
      <div ref="middle_container" class="middle_container">
        <el-table
          ref="table"
          class="mainTable"
          :data="tableData"
          stripe
          border
          :height="tableHeight"
          style="width: 99.9%"
          highlight-current-row
          :cell-style="cellStyle"
          @sort-change="sortChange"
        >
          <el-table-column label="序号" type="index" width="50" align="center" />
          <el-table-column
            prop="status"
            label="合同状态"
          />
          <el-table-column
            prop="customerName"
            label="客户名称"
            min-width="150"
          />
          <el-table-column
            prop="channelName"
            label="渠道名称"
            min-width="150"
          />
          <el-table-column
            prop="code"
            label="合同单号"
            min-width="130"
          />
          <el-table-column
            prop="name"
            label="合同名称"
          />
          <el-table-column
            prop="signDate"
            label="签订日期"
          />
          <el-table-column
            prop="signBy"
            label="签订人员"
          />
          <el-table-column
            prop="totalMoney"
            label="合同总金额"
            width="120"
            sortable="custom"
          />
          <el-table-column
            prop="receivedMoney"
            label="已回款金额"
            width="120"
            sortable="custom"
          />
          <el-table-column
            prop="waitReceiveMoney"
            label="待回款金额"
            width="120"
            sortable="custom"
          />
          <el-table-column
            prop="receivedRate"
            label="收款比例"
            width="120"
            sortable="custom"
          />
          <el-table-column
            prop="invoicedMoney"
            label="已开票金额"
            width="120"
            sortable="custom"
          />
          <el-table-column
            prop="waitInvoiceMoney"
            label="待开票金额"
            width="120"
            sortable="custom"
          />
          <infinite-loading
            ref="infiniteLoading"
            slot="append"
            force-use-infinite-wrapper=".mainTable .el-table__body-wrapper"
            @infinite="loadNext"
          />
        </el-table>
      </div>
      <div class="heji_container">
        <div class="left">
          <div class="column_heji column">合计</div>
          <!--          <div class="column_1 column">{{ totalData.totalCode }}</div>-->
        </div>
        <div class="right">
          <div class="column_2 column">{{ totalData.totalMoney }}</div>
          <div class="column_3 column">{{ totalData.totalReceivedMoney }}</div>
          <div class="column_4 column">{{ totalData.totalWaitReceiveMoney }}</div>
          <div class="column_5 column">{{ totalData.totalReceivedRate }}</div>
          <div class="column_6 column">{{ totalData.totalInvoicedMoney }}</div>
          <div class="column_7 column">{{ totalData.totalWaitInvoiceMoney }}</div>
        </div>
      </div>
      <div class="bottom_container">
        <div class="bottom_container_left">
          <div class="header_container">客户合同统计</div>
          <div class="search_container">
            <div class="search_item">
              <div class="name">人员</div>
              <div class="input">
                <el-select v-model="pageData2.signById" filterable clearable>
                  <el-option
                    v-for="item in userOptions"
                    :key="item.userId"
                    :label="item.realName"
                    :value="item.userId"
                  />
                </el-select>
              </div>
            </div>
            <div class="search_item">
              <div class="name">日期</div>
              <div class="input">
                <el-date-picker
                  v-model="pageData2.date"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="请选择"
                  :editable="false"
                />
              </div>
            </div>
          </div>
          <div class="bottom_container_left_main">
            <div class="bottom_container_left_main_item">
              <div class="name">本月新增客户数</div>
              <div class="value">{{ monthData.countCustomerByMonthUser }}</div>
            </div>
            <div class="bottom_container_left_main_item">
              <div class="name">本月新增合同数</div>
              <div class="value">{{ monthData.countContractByMonthUser }}</div>
            </div>
            <div class="bottom_container_left_main_item">
              <div class="name">本月客户跟进次数</div>
              <div class="value">{{ monthData.countVisitScheduleByMonthUser }}</div>
            </div>
            <div class="bottom_container_left_main_item">
              <div class="name">本月回款金额</div>
              <div class="value">{{ monthData.countReceiveRecordByMonthUser }}</div>
            </div>
            <div class="bottom_container_left_main_item">
              <div class="name">本月开票金额</div>
              <div class="value">{{ monthData.countInvoiceByMonthUser }}</div>
            </div>
          </div>
        </div>
        <div class="bottom_container_right">
          <div class="header_container">客户跟进记录</div>
          <div class="search_container">
            <div class="search_item">
              <div class="name">日期</div>
              <div class="input">
                <el-date-picker
                  v-model="pageData3.date"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择"
                  :editable="false"
                />
              </div>
            </div>
          </div>
          <div ref="table_container2" class="bottom_container_right_main">
            <el-table
              ref="table2"
              :data="dayData"
              stripe
              border
              :height="tableHeight2"
              style="width: 99.9%"
              @sort-change="sortChange"
            >
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column
                prop="customerName"
                label="客户名称"
              />
              <el-table-column
                prop="visitByDayTime"
                label="拜访时间"
              />
              <el-table-column
                prop="visitorName"
                label="拜访人员"
              />
            </el-table>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { list, listByMonth, listVisitByDay } from '@/api/sale/saleProgress'
import { mapGetters } from 'vuex'
import { sortChange } from '@/utils/table'
import { list as getUser } from '@/api/system/user'
export default {
  name: 'Index',
  computed: {
    ...mapGetters([
      'userId', 'userName'
    ])
  },
  watch: {
    'pageData.signBy'(value) {
      if (value == '' || value == undefined) {
        this.getList()
      }
    },
    'pageData.customerId'(value) {
      if (value == '' || value == undefined) {
        this.getList()
      }
    },
    'pageData.channelId'(value) {
      if (value == '' || value == undefined) {
        this.getList()
      }
    },
    'pageData2.signById'() {
      this.listByMonth()
    },
    'pageData2.date'() {
      this.listByMonth()
    },
    'pageData3.date'() {
      this.listVisitByDay()
    },
    'pageData.status'() {
      if (this.pageData.status == '') {
        this.getList()
      }
    }
  },
  data() {
    return {
      pageData: {
        status: undefined,
        customerId: undefined,
        customerName: undefined,
        channelId: undefined,
        channelName: undefined,
        number: undefined,
        signBy: undefined,
        creatTime: undefined,
        pageNum: 1,
        pageSize: 15,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      pageData2: {
        signById: undefined,
        date: this.$moment(new Date()).format('YYYY-MM')
      },
      pageData3: {
        date: this.$moment(new Date()).format('YYYY-MM-DD')
      },
      monthData: {
        countCustomerByMonthUser: '',
        countContractByMonthUser: '',
        countVisitScheduleByMonthUser: '',
        countReceiveRecordByMonthUser: '',
        countInvoiceByMonthUser: ''
      },
      dayData: [],
      mainId: 'id',
      userOptions: [],
      tableHeight: '0',
      tableData: [],
      totalData: {
        totalCode: '',
        totalReceivedRate: '',
        totalWaitReceiveMoney: '',
        totalWaitInvoiceMoney: '',
        totalMoney: '',
        totalReceivedMoney: '',
        totalInvoicedMoney: ''
      },
      tableHeight2: '0',
      tableData2: []
    }
  },
  mounted() {
    this.getUser()
    this.$nextTick(() => {
      this.tableHeight = this.$refs.middle_container.offsetHeight
      this.tableHeight2 = this.$refs.table_container2.offsetHeight
    })
    this.listByMonth()
    this.listVisitByDay()
  },
  methods: {
    // 排序规则改变时触发
    sortChange(column) {
      sortChange(column, this)
    },
    rowClick(row, column, event) { // 单击行
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
    },
    cellClick(row, column, cell) {
    },
    getList() { // 获取数据
      this.pageData.pageNum = 1
      this.tableData = []
      this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
    },
    loadNext($state) { // 加载下一页数据
      list(this.pageData).then(res => {
        if (res.data.data.length > 0) {
          this.tableData = this.tableData.concat(res.data.data)
          Object.keys(this.totalData).forEach(key => {
            this.totalData[key] = res.data[key]
          })
          this.pageData.pageNum++
          $state.loaded()
        } else {
          $state.complete()
        }
      })
    },
    getUser() { // 获取右侧数据
      getUser().then(res => {
        this.userOptions = res.data
      })
    },
    listByMonth() { // 获取右侧数据
      listByMonth(this.pageData2).then(res => {
        this.monthData = res.data
      })
    },
    listVisitByDay() { // 获取右侧数据
      listVisitByDay(this.pageData3).then(res => {
        this.dayData = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main-container{
  .left_container{
    width: 100%;
    border: unset;
    .search_item{

      width: 20%;
      min-width: 20%;
      max-width: 20%;
      .name{
        width: 100px;
      }
    }
    .heji_container{
      width: 100%;
      height: 40px;
      display: flex;align-items: center;justify-content: space-between;
      border-top: 1px solid #999999;
      .left{
        display: flex;align-items: center;
      }
      .right{
        display: flex;align-items: center;
      }
      .column{
        display: flex;justify-content: center;align-items: center;
      }
      .column{
        width: 120px;
      }
    }
    .bottom_container{
      width: 100%;
      height: 40%;
      border-top: 2px solid #333333;
      display: flex;
      .header_container{
        height: 40px;
        border-bottom: 1px solid #999999;
      }
      .search_item{
        width: 33.33%;
        min-width: 33.33%;
        max-width: 33.33%;
      }
      .bottom_container_left{
        flex: 1;
        border-right: 2px solid #333333;
        display: flex;
        flex-direction: column;
        .bottom_container_left_main{
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          padding-top: 16px;
          .bottom_container_left_main_item{
            display: flex;
            width: 50%;
            min-width: 50%;
            max-width: 50%;
            height: 50px;
            .name{
              width: 50%;
              display: flex;justify-content: flex-end;align-items: center;
              padding-right: 20px;
            }
            .value{
              flex: 1;
              display: flex;justify-content: flex-start;align-items: center;
            }
          }
        }
      }
      .bottom_container_right{
        flex: 1;
        display: flex;
        flex-direction: column;
        .search_container{
          margin-bottom: 16px;
        }
        .bottom_container_right_main{
          flex: 1;
        }
      }
    }
  }

}
</style>
